<template>
	<div id="seller">
	<ul class="line">
		<li class="line-name">{{seller.name}}</li>
		<li class="line-list">
			<span>起送价<p>{{seller.minPrice}}<i>元</i></p></span>
			<span>商家配送<p>{{seller.deliveryPrice}}<i>元</i></p></span>
			<span>平均配送时间<p>{{seller.deliveryTime}}<i>分钟</i></p></span>
		</li>
	</ul>
	<div class="line">
		<p class="line-title">公告与活动</p>
		<span class="line-bulletin">{{seller.bulletin}}</span>
	</div>
	<div class="line list">
		<ul v-for="(item,index) in seller.supports">
			<li><p :class="iconMap[index]"></p>{{item.description}}</li>
		</ul>
	</div>
  <div class="line"><amap></amap></div>
	</div>
</template>

<script type="text/ecmascript-6">
/*eslint-disable */
import axios from 'axios'
import amap from 'components/amap/amap'

export default{
	data () {
		return {
			seller:{}
		}
	},
	created () {
		this.iconMap=['decrease','discount','guarantee','invoice','special']
		axios.get('./static/data.json').then(res=>{
			this.seller = res.data.seller
		})
	},
  components: {
    amap
  }
}
</script>

<style>
#seller{position: absolute; width: 100%; overflow: hidden;background: #f1f1f1; font-family: "微软雅黑"}
#seller .line{ background: #fff; box-shadow: rgba(7,17,27,0.05) 2px 2px 2px ; margin-top: 3%; padding: 0 5%;}
#seller .line-name{ border-bottom: #eee 1px solid; font-size: 16px;padding: 5% 0; }
#seller .line-list{display: flex; justify-content: center; align-items: center;}
#seller .line-list span{flex: 1; text-align: center; margin: 5% 0; color: #666; font-size: 12px;}
#seller .line-list span p{ font-size: 32px; margin-top: 5%; color: #ffd161;}
#seller .line-list span p i{ font-size: 12px; font-style:normal; color: #666;}
#seller .line-title{ font-size: 16px; padding: 5% 0; }
#seller .line-bulletin{ color: red; line-height: 22px; font-size: 14px; padding-bottom: 5%; display: block;}
#seller .line.list p.decrease{width: 18px; height: 18px; display: block; background: url('decrease_4@2x.png'); background-size: 100%;display: inline-block;}
#seller .line.list p.discount{width: 18px; height: 18px; display: block; background: url('discount_4@2x.png'); background-size: 100%;display: inline-block;}
#seller .line.list p.guarantee{width: 18px; height: 18px; display: block; background: url('guarantee_4@2x.png'); background-size: 100%;display: inline-block;}
#seller .line.list p.invoice{width: 18px; height: 18px; display: block; background: url('invoice_4@2x.png'); background-size: 100%;display: inline-block;}
#seller .line.list p.special{width: 18px; height: 18px; display: block; background: url('special_4@2x.png'); background-size: 100%;display: inline-block;}
</style>
